<template>
  <div class="container">
    <div class="search-box">
      <van-search
        v-model="keyword"
        placeholder="搜索单号,客户,正文等"
        shape="round"
        @search="getOrderList()"
      />
    </div>
    <van-list
      ref="listBox"
      v-model="loading"
      class="content"
      finished-text="没有更多了"
      :finished="finished"
      immediate-check
      @load="bottomLoad"
    >
      <div
        v-for="(v,i) in list"
        :key="i"
        class="item"
        :class="v.orderStatus|statusMapClass"
      >
        <div class="title">
          <span class="order">服务单号：{{ v.serviceNo }}</span>
          <span class="status">{{ v.orderStatus|statusMap }}</span>
        </div>
        <div class="info">
          <span class="company">{{ v.companyName }}</span>
          <span class="createDate">{{ v.orderDate }}</span>
        </div>
        <div class="message">{{ v.liaisonContent }}</div>
        <div class="btn">
          <div class="btn-box">
            <div v-if="v.planStatus !== '02'">
              <div
                class="click-box"
                @click="jump('servicePlan', v)"
              >
                <van-image
                  width="16px"
                  height="16px"
                  fit="fill"
                  :src="img.servicePlan"
                />
                <span>服务计划</span>
              </div>
            </div>
            <div>
              <div
                class="click-box"
                @click="jump('workRecord', v)"
              >
                <van-image
                  width="16px"
                  height="16px"
                  fit="fill"
                  :src="img.workRecord"
                />
                <span>工作日志</span>
              </div>
            </div>
            <div v-if="v.archiveStatus !== '02'">
              <div
                class="click-box"
                @click="jump('closingReport', v)"
              >
                <van-image
                  width="16px"
                  height="16px"
                  fit="fill"
                  :src="img.closingReport"
                />
                <span>结案报告</span>
              </div>
            </div>
          </div>
          <van-divider :style="{ margin: 0}" />
        </div>

        <div class="person" @click="jump('detail', v)">
          <div class="left">
            <div class="first-name">{{ v.primaryUserName[0] }}</div>
            <span>{{ v.primaryUserDept }}-{{ v.primaryUserName }}</span>
          </div>
          <div class="right">查看详情
            <van-icon name="arrow" />
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { userInfo } from '../../assets/utils/mixin'
import { openWx } from '../../assets/utils'

export default {
  components: {},
  filters: {
    statusMap(status) {
      const map = {
        '01': '待处理',
        '02': '处理中',
        '03': '已结案',
        '04': '已归档',
      }
      return map[status]
    },
    statusMapClass(status) {
      const map = {
        '01': 'pending',
        '02': 'deepign',
        '03': 'resolve',
      }
      return map[status]
    },
    dateTran(date) {
      return date ? dayjs(date).format('YYYY-MM-DD') : ''
    },
  },
  mixins: [ userInfo ],
  data() {
    return {
      keyword: '',
      img: {
        servicePlan: require('../../assets/image/servicePlan.png'),
        workRecord: require('../../assets/image/workRecord.png'),
        closingReport: require('../../assets/image/closingReport.png'),
      },
      list: [],
      pageIndex: 1,
      total: 0,
      finished: false,
      loading: false,
    }
  },
  computed: {},
  watch: {},
  created() {
    localStorage.clear('active')
    this.init()
  },
  mounted() {
  },
  methods: {
    init() {
      this.getUserInfo()
      this.getOrderList()
    },

    async getOrderList(pageIndex = 1) {
      this.pageIndex = pageIndex
      this.loading = true
      const res = await this.server.post('/saleService/getSaleServiceList', {
        keyword: this.keyword, pageIndex, pageSize: 10,
      })
      if (res.code === '0') {
        if (pageIndex === 1) {
          this.$refs.listBox.$el.scrollTop = 0
          this.list = res.object.rows
        } else {
          this.list.push(...res.object.rows)
        }

        this.total = res.object.total
        this.finished = this.total <= pageIndex * 10
      } else {
        this.$toast(res.msg)
        this.finished = true
      }
      this.loading = false
    },

    bottomLoad() {
      if (!this.finished && this.loading) this.getOrderList(++this.pageIndex)
    },

    jump(page, data) {
      const params = { saleServiceId: data.uuid, serviceNo: data.serviceNo }
      const map = {
        detail: {},
        servicePlan:  { planNo: data.planNo },
        workRecord: {},
        closingReport: { archiveNo: data.archiveNo },
      }
      Object.assign(params, map[page])
      let str = ''
      for (const key of Object.keys(params)) {
      	str += `&${key}=${params[key]}`
      }
      openWx(`${location.origin}/${page}.html`, str)
    },

  },
}
</script>

<style lang="less" scoped>
@import "../../assets/var";

.container {
  width: 100%;
  height: 100%;
  background: #f8f8f8;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-bottom: 30px;
  .safe-padding();

  > div {
    width: 100%;
  }

  .search-box {
    padding: 2px 4px;
    background: #fff;
  }

  .content {
    flex: 1;
    overflow: auto;

    .item {
      margin-top: 12px;
      font-size: 14px;
      background: #fff;

      &.pending {
        .title {
          background: #FFEFBB;

          .status {
            color: orange;
          }
        }
      }

      &.deepign {
        .title {
          background: #FFE1E1;

          .status {
            color: red;
          }
        }
      }

      &.resolve {
        .title {
          background: #E1EEFF;

          .status {
            color: blue;
          }
        }
      }

      .title {
        display: flex;
        justify-content: space-between;
        padding: 8px 16px;
        align-items: center;

        .order {
          color: #333;
        }

        .status {
          color: #666;
        }
      }

      .info {
        font-size: 12px;
        color: #999;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 16px 0;
      }

      .message {
        padding: 8px 16px 0;
        font-size: 12px;
        color: #999;
        position: relative;

        .van-hairline--bottom {
          width: 100%;
          padding-bottom: 8px;
        }
      }

      .btn {
        padding: 8px 16px 0;
        width: 100%;

        .btn-box {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          padding-bottom: 8px;

          > div {
            width: 33%;
            display: flex;
            justify-content: center;
            align-items: center;

            span {
              margin-left: 4px;
              color: red;
              font-size: 12px;
            }
          }

          .click-box {
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }

      .person {
        padding: 8px 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;

        .left {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .first-name {
            background: #1F87FC;
            color: #fff;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
          }

          span {
            margin-left: 4px;
            color: #333;
          }
        }

        .right {
          color: #828282
        }
      }
    }
  }
}
</style>
